<template>
    <div class="pd-30">
        <div class="flex">
            <div class="flex">
                <div class=" center">
                    <p>课程名称：</p>
                    <el-input class="w-280" v-model="input" placeholder="请输入"></el-input>
                </div>
                <div class=" center ml-50">
                    <p>标签：</p>
                    <el-select class="w-280" v-model="value" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="flex">
                <el-button class="w-100" @click="chongzhi">重置</el-button>
                <div class="w-30"></div>
                <el-button class="w-100" type="primary" plain @click="getUserList">搜索</el-button>
                <div class="w-30"></div>
                <el-button class="w-100" type="primary" @click="addUser">添加</el-button>
            </div>
        </div>
        <div class="h-30"></div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="编号">
            </el-table-column>
            <el-table-column prop="name" label="课程名称">
            </el-table-column>
            <el-table-column prop="grade" label="适用年级">
            </el-table-column>
            <el-table-column prop="buyNums" label="购买人数">
            </el-table-column>
            <el-table-column label="费用（元）">
                <template #default="{ row }">
                    <p>{{ row.price }}元</p>
                </template>
            </el-table-column>
            <el-table-column prop="jiaoFuZhongXinName" label="交付中心">
            </el-table-column>
            <el-table-column prop="type" label="课程类型">
                <template #default="{ row }">
                    <p v-if="row.type == 1">体验课</p>
                    <p v-else>正式课</p>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template #default="{ row }">
                    <p v-if="row.status == 1">正常</p>
                    <p class="red" v-else>禁用</p>
                </template>
            </el-table-column>
            <el-table-column prop="submitTime" label="创建时间">
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <!-- <el-button size="mini" type="success">设置上级</el-button> -->
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">{{ scope.row.status == 1 ? '下线' : '上线' }}</el-button>

                </template>
            </el-table-column>
        </el-table>
        <div class="flex mt-20">
            <div></div>
            <el-pagination :current-page="page" background layout="prev, pager, next" :total="total"
                @current-change="sizeChange">
            </el-pagination>
        </div>


        <el-dialog :visible.sync="show" :show-close="false">
            <span slot="title" class="dialog-footer">
                <h4 class="text-center">{{ type == 1 ? '添加' : '编辑' }}课程</h4>
            </span>
            <div class="plr-30 scroll">
                <div class="flex_l">
                    <div class="w-100 flex_l"><p class="red">*</p> 课程名称：</div>
                    <el-input class="w-350 ml-20" v-model="form.name" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100 flex_l"><p class="red">*</p> 课时：</div>
                    <el-input class="w-350 ml-20" v-model="form.keShi" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100 flex_l"><p class="red">*</p> 图片：(推荐尺寸：167*131)</div>
                    <el-upload class="ml-20" :action="upUrl" list-type="picture-card" :on-success="handlePictureCardPreview"
                        :on-remove="handleRemove" :limit="1" :file-list="imgList">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">购买人数：</div>
                    <el-input class="w-350 ml-20" v-model="form.buyNums" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">适用年级：</div>
                    <el-input class="w-350 ml-20" v-model="form.grade" placeholder="请输入"></el-input>
                </div>

                <div class="flex_l mt-20">
                    <div class="w-100 flex_l"><p class="red">*</p> 费用（元）：</div>
                    <el-input class="w-350 ml-20" type="number" v-model="form.price" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">简介：</div>
                    <!-- <el-input class="w-350 ml-20" size="small" v-model="form.content" type="textarea"
                        placeholder="请输入"></el-input> -->
                    <rich-text class="flex-1 ml-20"  ref="fueditModule" @loadingCompleted="loadingCompleted"></rich-text>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100 flex_l"><p class="red">*</p> 选择标签：</div>
                    <el-select v-model="form.tags" multiple collapse-tags class="w-350 ml-20" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100 flex_l"><p class="red">*</p> 交付中心：</div>
                    <el-select class="w-350 ml-20" v-model="form.jiaoFuZhongXinId"  filterable  placeholder="请选择">
                        <el-option v-for="item in jfzxList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">课程类型：</div>
                    <div class="ml-20">
                        <el-radio v-model="form.type" label="1">体验课</el-radio>
                        <el-radio v-model="form.type" label="2">正式课</el-radio>
                    </div>
                </div>
            </div>



            <span slot="footer" class="dialog-footer">
                <el-button @click="show = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import RichText from '@/components/RichText/RichText.vue'

import { cusCourseList, cusCourseEdit, cusCourseTeacherRemove, addcusCourse, courseTagList, getcusJiaofuzhongxin,onLine,offLine } from '@/api/hhr.js'
export default {
    name: "Curriculum",
    data() {
        return {
            show: false,
            options: [],
            value: '',
            input: '',
            input1: '',
            tableData: [],
            page: 1,
            total: 0,
            form: {
                buyNums: '',
                content: '',
                grade: '',
                jiaoFuZhongXinId: '',
                jiaoFuZhongXinName: '',
                keShi: '',
                name: '',
                pic: '',
                price: '',
                sortNum: '',
                status: '1',
                tags: '',
                type: '1'
            },
            dialogImageUrl: '',
            type: '',//1新增 2修改
            upUrl: this.$upLoadUrl,
            imgList: [],
            jfzxList:[]
        }
    },
    components: {
        RichText
    },
    mounted() {
        this.getUserList()
        // this.upUrl = this.$baseUrl + '/apis/000/002-uploadFileForJson'
        this.courseTagList()
        this.getJfzxList()
    },
    methods: {
        loadingCompleted() {
            try {
                console.log('editor加载完成，回调父组件');
                // this.details = this.$refs.fueditModule.setHtml('<p><b>招商会详情！！</b></p>');
            } catch (error) {
                console.log('打开弹窗 err =', error);
            }
        },
        getJfzxList(){
            getcusJiaofuzhongxin({
                pageNum:1,
                pageSize:1000000
            }).then(res=>{
                this.jfzxList = res.rows
            })
        },
        courseTagList() {
            courseTagList().then(res => {
                this.options = res.rows
            })
        },
        chongzhi() {
            this.input = ''
            this.value = ''
            this.getUserList()
        },
        sizeChange(e) {
            this.page = e
            this.getUserList()
        },
        addUser() {
            for (var i in this.form) {
                if (i != 'type' && i != 'status') {
                    this.form[i] = ''
                }
            }
            this.show = true
            this.type = 1
            this.imgList = []
        },
        submit() {
            if(this.form.name == ''){
                return this.$message({
                        message: '请输入课程名称',
                        type: 'error'
                    });
            }
            if(this.form.keShi == ''){
                return this.$message({
                        message: '请输入课时',
                        type: 'error'
                    });
            }
            if(this.form.pic == ''){
                return this.$message({
                        message: '请上传图片',
                        type: 'error'
                    });
            }
            if(this.form.price == ''){
                return this.$message({
                        message: '请输入费用',
                        type: 'error'
                    });
            }
            if(this.form.tags == ''){
                return this.$message({
                        message: '请选择标签',
                        type: 'error'
                    });
            }
            if(this.form.jiaoFuZhongXinId == ''){
                return this.$message({
                        message: '请选择交付中心',
                        type: 'error'
                    });
            }
            var apiFunction = this.type == 1 ? addcusCourse : cusCourseEdit
            this.form.jiaoFuZhongXinName = this.jfzxList.filter(item => item.id === this.form.jiaoFuZhongXinId)[0].name;
            this.form.tags = this.form.tags + ''
            this.form.content = this.$refs.fueditModule.getHtml();
            apiFunction(this.form).then(res => {
                if (res.code == 0) {
                    this.show = false
                    this.getUserList()
                    this.$message({
                        message: this.type == 1 ? '添加成功' : '修改成功',
                        type: 'success'
                    });
                } else {
                    this.$message.error(res.msg || '失败');
                }
            })
        },
        getUserList() {
            cusCourseList({
                pageNum: this.page,
                pageSize: 10,
                name: this.input,
                tags: this.value
            }).then(res => {
                this.tableData = res.rows
                this.total = res.total
            })
        },
        handleEdit(e, type) {
            for (var i in this.form) {
                this.form[i] = type[i]
            }
            this.imgList = [{ name: '1', url: type.pic }]
            setTimeout(res=>{
                this.$refs.fueditModule.setHtml(type.content);
            },100)
            this.form.id = type.id
            this.show = true
        },
        handleDelete(e, type) {
            
            // this.$confirm('此操作将永久删除, 是否继续?', '提示', {
            //     confirmButtonText: '确定',
            //     cancelButtonText: '取消',
            //     type: 'warning'
            // }).then(() => {
                var apiFunction = type.status == 1 ? offLine : onLine
                apiFunction({ ids: type.id }).then(res => {
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                    this.getUserList()
                })

            // }).catch(() => {
            //     this.$message({
            //         type: 'info',
            //         message: '已取消删除'
            //     });
            // });
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
            this.form.pic = ''
        },
        handlePictureCardPreview(file) {
            this.form.pic = file.list[0].url
        }
    }
}
</script>